@import "kb.scss";

.i_maxW{
	max-width: 1200px;
	margin: auto;
}

.el-picker-panel__footer{
	.el-button--text{
		display: none;
	}
}

.netteach-nav{
	background: $bg_3;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
	border-top: 3px;
	padding: 20px 20px 13px 20px;
}
.netteach-nav-type{
	display:flex;
	flex-flow:row;
	font-size: 14px;
	line-height: 29px;
	margin-bottom: 10px;
	>span{
		display: block;
		width: 60px;
		color: #666666;
	}
	>div{
		flex:1;
		.el-radio__input{
			display: none;
		}
	}
}


.netteach-screen{
	margin: 20px 0;
	.el-radio__input{
		display: none;
	}
	>span{
		line-height: 19px;
		margin-right: 40px;
		font-size: 14px;
		cursor: pointer;
		padding: 0;
		i{
			margin-left: 5px;
		}
		&:hover{
			color: $sc_6;
		}
	}
}

.netteach-list{
	display: table;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	>li{
		flex:auto; 
		width: 590/1200*100%;
		background: #ffffff;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
		margin: 0 10/1200*100% 10/1200*100% 0;
		max-width: 590/1200*100%;
		&:nth-of-type(2n){
			margin: 0 0 10/1200*100% 0;
		}
		&:hover{
			.el-icon-delete{color: red}
		}
	}
}

.netteach-list-title{
	position: relative;
	padding:  20/393*100%;
	background: #dae9fb;
	>a, >p{
		font-size: 18px;
		display: inline-block;
		vertical-align: top;
		max-width: 70%;
		line-height: 24px;
		@extend .i_text;
		cursor: pointer;
		&:hover{
			color: #348efc;
		}
	}
	>i{
		position: absolute;
		top: 20px;
		right: 12px;
	}
}

.netteach-list-status{
	margin-top: 20/393*100%;
	line-height: 28px;
	>i{
		margin-right: 10px;
	}
	>span{
		// display: block;
	}
}

.netteach-list-content{
	height: 95px;
	overflow: hidden;
	margin: 20/393*100% ;
}

.netteach-list-info{
	padding: 20/393*100% 0 30/393*100%;
	margin: 0 20/393*100%;
	border-top: 1px dashed #e0e0e0;
}

.netteach-list-resource{
	margin-bottom: 30/393*100%;
	overflow: hidden;
	>span{
		margin-right: 20/353*100%;
		display: inline-block;
		vertical-align: top;
		line-height: 24px;
		&:last-of-type{
			margin: 0;
			
		}
		>i{
			margin-right: 5px;
		}
	}
	em{
		font-size: 16px;
	}
	strong{
		display: inline-block;
		vertical-align: top;
		// width: 90px;
		height: 26px;
		line-height: 26px;
		color: #2f6d8c;
		padding: 0 5px;
		background-image: linear-gradient(-90deg, #ffffff 0%, #d5f5ff 100%);
	}
}

.netteach-list-initiator{
	overflow: hidden;
	>span{
		color: #666666;
		margin-right: 40px;
		line-height: 16px;
		&:last-of-type{
			margin: 0;
		}
	}
	i{
		cursor: pointer;
		float: right;
		color: #666666;
		font-size: 16px;
	}
}


.netteach-crumbs{
	padding: 0 0 20px;
	 font-size: 14px;
	>span{
		cursor: pointer;
	}
	 i {
	    font-family: Simsun;
	    padding: 0 10px;
	}
}

.netteach-details-content{
	background: #fff;
	padding: 30/1200*100% 40/1200*100%;
	position: relative;
}

.details-theme-cont{
	padding: 30/1200*100% 40/1200*100%;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
	position: relative;
	background: #fff;
	border-right: 3px;
}
.details-theme-cont{
	font-size: 14px;
}

.details-number,
.details-number2{
	position: absolute;
	top: 70px;
	right: 40px;
	text-align: center;
	>strong{
		color: #999;
		display: block;
		margin-top: 25px;
		font-size: 12px;
	}
	>span{
		font-size: 30px;
		color: #666;
		position: absolute;
		top: 26px;
		left: 0;
		right: 0;
		margin: auto;
	}
}

.details-number2{
	>span{
		color: #ff6525
	}
}

.details-theme{
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	margin-bottom: 20px;
}

.details-see-info{
	margin-bottom: 20px;
	>em{
		line-height: 24px;
		margin-right: 20px;
		color: #348efc;
	}
	>span{
		margin-right: 30px;
		line-height: 15px;
		font-size: 12px;
		i{
			margin-right: 5px;
			vertical-align: text-bottom;
		}
	}
}

.details-initiator{
	margin-bottom: 20px;
	>span{
		margin-right: 40px;
	}
}

.details-hr{
	border-bottom: 1px dashed #e0e0e0;
	margin: 35px 0 30px;
}

.details-range,.details-activity-info{
	margin-bottom: 30px;
	>h3{
		font-size: 14px;
		line-height: 19px;
		margin-bottom: 20px;
		font-weight: bold;
		&:before {
		    content: "";
		    padding-left: 10px;
		    border-left: 2px solid #348efc;
		}
	}
}

.details-users{
	display:flex;
	flex-flow:row;
	margin-bottom: 20px;
	line-height: 32px;
	>span{
		display: block;
		width: 100px;

	}
	>div{
		flex:1;
		>span{
			margin-right: 15px;
			&:last-of-type{
				margin: 0;
			}
		}
	}
	.details-see{
		color: #348efc;
		cursor: pointer;
	}
}

.details-video{
	margin-top: 40px;
	>h3{
		font-size: 18px;
		line-height: 24px;
	}
	>ul{
		overflow: hidden;
		margin-top: 20px;
	}
}

.substandard-title{
	margin-bottom: 20px;
	>span{
		margin-right: 20px;
	}
}


.el-dialog__header{
	background: #348efc;
	span{
		color: #fff;
	}
	.el-dialog__headerbtn .el-dialog__close{
		color: #fff
	}
}

.netteach-add-content{
	background: #fff;
	padding: 30px 40px 75px;
}

.el-form-item__content{
	position: relative;
	.word-number{
		position: absolute;
		bottom: 5px;
		right: 5px;
		color: #999;
		line-height: 19px;
		>i{
			color: #666;
		}
	}
	button{
		line-height: 36px;
		height: 36px;
		width: 80px;
		text-align: center;
		font-size: 14px;
		border: 0;
		padding: 0;
	}
	>a{
		margin-left: 15px;
		color: #338efc;
	}
}

.tagList{
	span{
		margin-right: 10px;
		border: none;
	}
}

.date-time{
	>.el-form-item__content{
		.el-form-item{
			display: inline-block;
			vertical-align: top;

		}
		>i{
			padding: 0 10px;
		}
	}
}

.netteach-range{
	.el-form-item__label{
		line-height: 20px;
	}
}

.standard-content{
	padding: 30px 40px 75px;
	background: #fff;
}


.standard-table{
	margin-bottom: 40px;
	>h3{
		font-size: 16px;
		line-height: 21px;
		margin-bottom: 20px;
		font-weight: bold;
	}
	.el-button{
		padding: 0;
		border: 0;
		&:hover{

		}
	}
	.cell{
		>a{
			padding: 0 10px;
			color: #338efc;
		}
	}

	.el-pagination{
		margin: 20px 0;
		text-align: right;
	}
}

.standard-new{
	>h3{
		font-size: 16px;
		line-height: 21px;
		margin-bottom: 20px;
		font-weight: bold;
	}
	>.el-form{
		.el-form-item__label{
			text-align: left;
		}
	}

	.standard-score{
		.el-input{
			display: inline-block;
			vertical-align: top;
			width: 40px;
			>input{
				padding: 0;
				border: none;
				text-align: center;
				&:disabled{
					color: #333;
					background: none
				}
			}
		}
	}
}

.total-score{
	.el-tabs--card{
		>.el-tabs__header{
			border: 0;
			.el-tabs__item{
				border: 0;
				background: #ecf5ff;
				border-radius: 3px;
				overflow: hidden;
				margin-right: 5px;
			}
			.el-tabs__nav{
				border: 0;
			}
			.is-active.is-closable{
				background: #338efc;
				color: #fff;
			}
		}
	}
	.el-tabs__new-tab{
		border: 1px solid #338efc;
		i{
			color: #338efc
		}
	}

	.el-tabs{
		background: #f5f5f5;
		padding: 20px;
		border-radius: 10px;
	}

}


.total-score-list{
	li{
		>div{
			margin-bottom: 20px;
			>.el-form-item{
				display: inline-block;
				vertical-align: top;
				&:nth-of-type(1){
					width: 60%;
					margin-right: 5%;
				}
				&:nth-of-type(2){
					width: 30%;
				}
			}
			.el-input-number{
				width: 100px;
			}
			.el-icon-close{
				margin-left: 20px;
				font-size: 16px;
				color: #999;
				&:hover{
					color: #f56c6c;
				}
			}
		}
		.catalog-list-btn{
			margin: 0;
			button{
				padding: 0 10px;
			}
		}
	}
}

.dependent{
	padding: 40px 0;
	text-align: center;
	color: #999;
	// background: #fff;
	p{
		font-size: 16px;
		margin-top: 20px;
	}
}

.el-pagination{
	margin-top: 20px;
}

.video-list{
	position: relative;
	>a{
		&:nth-of-type(1){
			display: block;
			width: 100%;
			height: 100%;
			img{
				width: 100%;

			}
		}
		&:nth-of-type(2){

		}
	}

}

.video-info{
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgba(255,255,255,.6);
	padding: 10px;
	width: calc(100% - 20px);
	transition: .3s;
	>a{
		display: block;
		font-size: 14px;
		margin-bottom: 10px;
		@extend .i_text;
	}
	>div{
		display: flex;
		 flex-wrap: wrap;
  		justify-content: space-between;
		.video-user{
			justify-content: flex-start;
			line-height: 25px;
			>span{
				display: inline-block;
				vertical-align: top;
				width: 25px;
				height: 25px;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 10px;
			}
		}
		>span{
			color: #666;
			font-size: 14px;
			justify-content: flex-end;

		}
	}
}


.el-carousel__arrow{
	background-color: rgb(51, 142, 252);
}

.substandard-child{
	.el-table_1_column_2,
	.el-table_1_column_3  {
		padding: 0 !important;
		>.cell{
			padding: 0;
			.el-table_2_column_4  {
				border-right: 0;
			}
		}
	}

}

.standard-item{
	width: 100%;
	border: 1px solid #ddd;
	line-height: 40px;
	border-collapse: collapse;
	border-spacing: 0;
	 table-layout: fixed;
	th,td{
		border: 1px solid #ddd;
		text-align: center;
		padding: 0 8px;
	}
	tr{
		td,th{
			word-break:break-all;
			line-height: 30px;
			&:nth-of-type(1){
				width:30%;
			}
			&:nth-of-type(2){
				width: 50%;
			}
			&:nth-of-type(3){
				width: 10%;
			}
			&:nth-of-type(4){
				width: 10%;
			}
		}
	}
	.el-input__inner{
		border-color: #348efc;
		border-radius: 0;
		
	}
	.el-input-number{
		width: 100%;
	}
}

.video-keyword{
	margin-bottom: 20px;
	>.el-input{
		width: 300px;
		.el-input__inner{
			padding-right: 44px;
		}
		.el-input__suffix{
			background: #348efc;
			color: #fff;
			width: 44px;
			right: 0;
			border-radius: 0 3px 3px 0;
		}
	}
    .el-cascader{
		margin-right: 15px;
    }
	.el-select{
		width: 200px;
		margin-right: 15px;
	}
	
}

.video-preview{
	padding: 0;
	border: 0;
	color:  #348efc;
}

.video-view{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: 	rgba(0, 0, 0, .1);
	visibility: hidden;
	transition: .1s;
	opacity: 0;
	.video-play{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 800px;
		height: 400px;
		visibility: hidden;
	}
	.vjs-control-bar{
		// visibility: hidden;
	}

	.train-video-player{
		height: 360px;
	}
	.video-js{
		height: 100%;
	}
}

.videoView{
	visibility: visible;
	opacity: 1;
	.video-play{
		visibility: visible;
	}
}

.video-view-t{
	background: #348efc;
	padding: 20px;
	color: #fff;
	font-size: 18px;
	>i{
		float: right;
		cursor: pointer;

	}
}

.video-btn{
	margin-top: 40px;
	text-align: center;
	button{
		border: 0;
		padding: 0;
		width: 80px;
		line-height: 40px;
		text-align: center;
	}
}

.hide{
	display: none;
}


.netteach-video-bpx{
	background: #fff;
	padding: 30px 40px;
	position: relative;
	border-radius: 3px;
	>h3{
		font-size: 18px;
		    display: inline-block;
		    vertical-align: top;
		    max-width: 60%;
		    line-height: 24px;
	}
}

.netteach-video-user{
	margin: 20px 0 30px;
	overflow: hidden;
	>a{
		display: block;
		float: left;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	p{
		font-size: 12px;
		line-height: 19px;
		color: #888888;
	}
}

.netteach-video-play{
	width: 100%;
	height: 500px;
	text-align: center;
	background: #000;
	font-size: 0;
	.train-video-player{
		height: 500px;
	}
	.video-player,.video-js{
		width: 100%;
		height: 100% !important;
	}
}


.netteach-video-txt{
	background: #ffffff;
	padding: 25px 40px;
	margin: 30px 0;
}

.netteach-video-txt-h{
	line-height: 30px;
	padding-bottom: 20px;
	display: flex;
		justify-content:space-between;
	button{
		padding: 0;
		width: 80px;
		text-align: center;height: 30px;
		line-height: 30px;
		font-size: 14px;
	
		display: block;
	}
}

.netteach-comment{
	display: flex;
	flex-flow:row;
	padding: 20px 5px;
	border-radius: 4px;
	border-bottom: 1px solid #e0e0e0;
	&:first-of-type{
		border-top: 1px solid #e0e0e0;
	};
	&:hover{
		.netteach-txt-op i{
			opacity: 1;
		}
	}
}

.netteach-comment-l{
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	margin-right: 15px;
	justify-content:flex-start;
	>img{
		width: 100%;
		height: 100%;
	}
}

.netteach-comment-r{
	flex:1;
}

.netteach-comment-r-t{
	line-height: 40px;
	>span{
		font-size: 12px;
		color: #666;
		display: inline-block;
		vertical-align: top;
	}
}

.netteach-txt-op{
	
	>i{
		margin-right: 15px;
		vertical-align: unset;
		opacity: 0;
		font-size: 20px;
		color: #999
	}
	span{
		i{
			font-size: 20px;
			color: #ff6525;
			margin: 5px;
		}
	}
}


.netteach-commen-cont{
	@extend .i_word;
	font-size: 14px;
	line-height: 22px;
}


.i_activitySt{
	position: absolute;
	right: 40px;
	top: 30px;
	width: 93px;
	>span{
		font-size: 40px;
		color: #ff6525;
		display: block;
		text-align: center;
		line-height: 70px;
	}
	i{
		position: absolute;
		top: 0;
		left: 0;
	}
}


.textarea-box{
	margin: 20px 0;
	position: relative;
	span{
		position: absolute;
		bottom: 5px;
		right: 5px;
		color: #999;
		font-size: 12px;
		i{
			color: #666;
		}
	}
}

.textarea-btn{
	text-align: center;
	button{
		padding: 0;
		width: 80px;
		height: 36px;
		line-height: 36px;
	}
}


.confirm-them {
    border-radius: 0;
    border: 0;
    .el-message-box__header {
        background: $bg_1;
        span,
        i {
            color: #fff;
        }
    }
    .el-message-box__content {
        padding: 30px;
    }
    .el-message-box__btns {
        padding: 9px 25px;
    }
}

.visibleBox{
	.el-dialog__title {
	    background: $bg_1;
	    span,
	    i {
	        color: #fff;
	    }
	    .el-dialog__title{
	    	font-size: 14px;
	    }
	}
	.el-dialog__footer{
		padding-top: 0;
	}
}


.editoria-box{
	position: relative;
	span{
		position: absolute;
		right: 5px;
		bottom: 5px;
		font-size: 12px;
		color: #999;
	}
}


.i-groupLs .i-groupLs-if > a,
.i-groupLs .i-groupLs-if > p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.i-groupLs {
    float: left;
    width: 290/1200*100%;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 13/1200*100% 20/1200*100% 0;
    background: #fff;

    -moz-transition: all 0.35s ease-in;
    -webkit-transition: all 0.35s ease-in;
    -o-transition: all 0.35s ease-in;
    transition: all 0.35s ease-in;
    position: relative;
    &:hover {
            -webkit-box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
        }
}


.i-groupLs .i-groupLs-img {
    height: 140px;
    display: block;
    overflow: hidden;
}
.i-groupLs .i-groupLs-img a,
.i-groupLs .i-groupLs-img img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    display: block;
}
.i-groupLs-img a {
    position: relative;
}
.i-groupLs-img a::after {
    content: "";
    opacity: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.01) 2%,
        rgba(0, 0, 0, 0.2)
    );
    transition: opacity 0.4s ease-in-out;
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 140px;
}
.i-groupLs-img:hover > a:after {
    opacity: 1;
}

.i-groupLs .i-groupLs-if {
    padding: 0 10/290*100% 20/290*100%;
    background: #ffffff;
}
.i-groupLs .i-groupLs-if > a {
    font-size: 14px;
    color: #020202;
    line-height: 20px;
    padding-top: 13px;
    display: block;
    cursor: pointer;
}
.i-groupLs .i-groupLs-if .i-groupLs:hover {
    box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
}
.i-groupLs:nth-of-type(4n) {
    margin: 0 0 18px 0;
}
.i-groupLs-info {
    margin-top: 14px;
    height: 25px;
    line-height: 25px;
    .acatar-img {
        display: inline-block;
        vertical-align: middle;
        width: 25px;
        height: 25px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 5px;
    }
    .collection08,
    strong {
        vertical-align: middle;
    }
    strong {
        margin-left: 5px;
    }
    .playi{
    	vertical-align: middle;
    }
}


.groupLs-video{
	.i-groupLs{
		width: 100%;
	}
}

.test-message{
	width: 400px;
	border-radius: 0;
	padding: 0;
	border: 0;
	.el-message-box__header{
		background: #409eff;
		padding: 11px 20px;
	}
	.el-message-box__title{
		font-size: 14px;
		color: #fff;
	}
	.el-message-box__headerbtn{
		color: #fff;
		font-size: 18px;
		top: 7px;
		i{
			color: #fff;
			&:hover{
				color: #fff;
			}
		}
	}
	.el-message-box__content{
		padding: 35px;	
	}

	.el-message-box__btns{
		text-align: center;
		margin-bottom: 20px;
		button{
			padding: 0;
			width: 68px;
			height: 30px;
			font-size: 12px;
			border-radius: 3px;
			text-align: center;
			border: 0;
			&:nth-of-type(1){
				background: #DEEFFF;
				color: #7C9BB8;
			};
			&:nth-of-type(2){
				color: #FFFFFF;
				background: #348EFC;
			};
		}
	}
}


.el-table .warning-row {
    background: #f0f9eb;
  }

  .video-visible{
  	.el-table__body-wrapper{
  		height: 480px;
  		overflow-y: auto;
  	}
  }









@media screen and (max-width: 1380px) {
    .i_maxW {
        max-width: 1000px;
    }

}